
    <h2>Custom Tooltip Style</h2>
    <p>This sample shows how to change the tooltip style.</p>
    <div style="margin:s0px 0;"></div>
    <div style="padding:10px 200px">
        <div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <div style="padding:10px 200px">
        <div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script>
        $(function(){
            $('#pp1').tooltip({
                position: 'right',
                content: '<span style="color:#fff">This is the tooltip message.</span>',
                onShow: function(){
                    $(this).tooltip('tip').css({
                        backgroundColor: '#666',
                        borderColor: '#666'
                    });
                }
            });
            $('#pp2').tooltip({
                position: 'bottom',
                content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>',
                onShow: function(){
                    $(this).tooltip('tip').css({
                        backgroundColor: '#fff000',
                        borderColor: '#ff0000',
                        boxShadow: '1px 1px 3px #292929'
                    });
                },
                onPosition: function(){
                    $(this).tooltip('tip').css('left', $(this).offset().left);
                    $(this).tooltip('arrow').css('left', 20);
                }
            });
        });
    </script>
